<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script>
		<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"> </script>
		<script src="https://gitee.com/weisss1993/dsApp/raw/master/js/ajax.js"></script>
		
	</head>
	<body>
		<div id="app">
			
			<van-nav-bar @click-left="onClickLeft" left-arrow />
			</van-nav-bar>
			
			<van-swipe :autoplay="3000" style="border-bottom:1px solid #E8E8E8;">
				<van-swipe-item v-for="img in detail.SwipeImages" indicator-color="red">
					<img :src="img.src" width="100%" onerror="this.src='../img/detail_default.jpg'" />
				</van-swipe-item>
			</van-swipe>

			<van-row>
				<div style="margin-top:5px;margin-left: 15px;margin-bottom: 5px;font-size:30px;font-weight:bold;">{{ goods.title }}</div>
				<div style="color:red;margin-left:15px;font-size:30px;margin-top: 15px;">{{ goods.price }}</div>
			</van-row>
			<van-cell>
				<van-col span="8" style="color: #969799;">运费：{{ goods.express }}</van-col>
				<van-col span="8" style="color: #969799;">销量：{{ goods.remain }}</van-col>
			</van-cell>
			<van-cell style="background-color:#EBEDF0;">
				<van-col span="8"><span style="color: red;font-weight:600;">☞正品保证</span></van-col>
				<van-col span="8"><span style="color: red;font-weight:600;">☞极速退款</span></van-col>
				<van-col span="8"><span style="color: red;font-weight:600;">☞两天内发货</span></van-col>
			</van-cell>
			<van-cell style="background-color:#E5E5E5;"></van-cell>
			<van-cell title="商品详情" style="font-weight:600;"></van-cell>
			<div id="app" style="margin-bottom: 30px;">
				<div class="lazyload">
					<img v-for="img in imageList" v-lazy="img">
				</div>
			</div>
			<van-goods-action>
				<van-goods-action-mini-btn icon="like-o" text="收藏"></van-goods-action-mini-btn>
				<van-goods-action-big-btn text="加入购物车"></van-goods-action-big-btn>
				<van-goods-action-big-btn primary text="立即购买"></van-goods-action-big-btn>
			</van-goods-action>
		</div>
		<style type="text/css">
			.lazyload {
				padding: 10px;
			}

			.lazyload img {
				width: 100%;
				margin: 10px 0px;
			}
		</style>
		<script>
			Vue.use(VueLazyload);
			var vm = new Vue({
				el: "#app",
				data: {
					goods: {
						title: '贝卡贝拉吉奥艾米莉亚蓝布鲁斯科起泡葡萄酒',
						price: '¥129.0',
						express: '免运费',
						remain: 290,
					},
					imageList: [
						'../img/dt_1.png',
						'../img/dt_2.png',
						'../img/dt_3.png',
						'../img/dt_4.png',
					],
					detail: ""
				},
				methods: {
					onClickLeft() {
						alert('返回');
					},
					details: function() {
						ajax({
							url: "http://dsapi.ysd3g.com/API/GoodsDetail",
							dataType: "jsonp",
							data: {
								gId: 11
							},
							success(res) {
								vm.detail = res.Detail;
								vm.pid = res.Detail.Id;
							}
						});

					}
				},
				created: function() {
					this.details();
				}
			})
		</script>
	</body>
</html>
